<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My WebSocket</title>

    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div id="ws">

    <button onclick="enter()">enter</button>
    <br/>
    <br/>
    <button onclick="closeWS()" :disabled="!opened">Close</button>
    <button onclick="openWS()" :disabled="opened">Open</button>
    <div>
        用户余额{{user.money}}
        <br/>

        可以玩吗：{{data.canPlay}}
        <ul v-for="stakeGroup in data.stakeGroups">
            <li v-for="stake in stakeGroup.stakes">
                {{stakeGroup.id}}--{{stakeGroup.name}}--{{stake.id}}--{{stake.name}}--{{stake.selfMoney}}--{{stake.total}}
                <a href="#" @click="stak1e(stakeGroup.id,stake.id)">下注</a>
            </li>
        </ul>
        <br/>

    </div>
</div>
</body>

<script type="text/javascript">
    var websocket = null;

    var wsVue = new Vue({
        el: '#ws',
        methods: {
            stak1e: function stake(group, stake) {
                var message = {
                    messageType: 5,
                    request: {
                        userToken: "fac860d744306e3d78dcdcd549738fb1",
                        money: 10,
                        groupId: group,
                        stakeId: stake
                    }
                }
                websocket.send(JSON.stringify(message));
            }
        },
        data: {
            user: {},
            msg: "welcome to my websocket...<br/>",
            opened: false,
            data: [],
            result: {}
        },
        mounted: function () {
            initWs();
        }
    });

    function initWs() {
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://127.0.0.1/nz");
        } else {
            alert('Sorry, websocket not supported by your browser.')
        }

        //Error callback
        websocket.onerror = function () {
            wsVue.opened = false;
        };

        //socket opened callback
        websocket.onopen = function (event) {
            wsVue.opened = true;
            var message = {messageType: 1, request: {userToken: "fac860d744306e3d78dcdcd549738fb1"}}
            websocket.send(JSON.stringify(message));
            var message = {messageType: 3, request: {userToken: "fac860d744306e3d78dcdcd549738fb1"}}
            websocket.send(JSON.stringify(message));
        }

        websocket.onmessage = function (event) {
            setMessageContent(JSON.parse(event.data));
        }

        //socket closed callback
        websocket.onclose = function () {
            wsVue.opened = false;
            alert("close")
        }

        //when browser window closed, close the socket, to prevent server exception
        window.onbeforeunload = function () {
            websocket.close();
        }
    }

    //update message to vue and then in div
    function setMessageContent(content) {
        if (content.type == 2) {
            alert("1")
            wsVue.data = content;
        }
        if (content.type == 5)
            wsVue.user = content.request;
        if (content.type == 7) {
            console.log(content)
            alert(content.win ? ("此枪打中：" + (content.selfWin ? ("自己中奖啦：" + content.money) : "但是未中奖")) : "此枪没有打中！")
        }
    }

    function closeWS() {
        websocket.close();
        wsVue.opened = false;
    }

    //click to open the websocket
    function openWS() {
        initWs();
    }

    //click to send message
    function enter() {
        var message = {messageType: 1, request: {userToken: "fac860d744306e3d78dcdcd549738fb1"}}
        websocket.send(JSON.stringify(message));
    }

</script>
</body>
</html>
